<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
    <link rel="stylesheet" href="../../css/utils/bootstrap-datetimepicker.css" />
 
	<title></title>
	<style>
		.operate-btn .btn {
			width: 130px;
		}
		
		.article-info {
			margin-top: 30px;
			display: flex;
			justify-content: space-between;
		}
		.title-abstract {
			width: 60%;
		}
		.title-prompt .title {
			display: inline-block;
			position: relative;
			width: calc(100% - 150px);
		}
		.title-prompt .prompt {
			display: none;
			/*display: inline-block;*/
			margin-left: 10px;
			color: red;
			vertical-align: middle;
		}
		.title-prompt .number-words {
			position: absolute;
			top: 8px;
			right: 20px;
			color: #C7C7C7;
		    font-size: 11px;
		}
		.abstract-prompt {
			margin-top: 20px;
		}
		.abstract-prompt.title-prompt .number-words {
			top: 29px;
			right: 20px;
		}
		.abstract-prompt.title-prompt .prompt {
			vertical-align: top;
		}
		.preview-img {
			width: 160px;
			height: 130px;
			background-color: #09262B;
			color: #fff;
			text-align: center;
			line-height: 130px;
		}
		
		.implant-ad {
			width: 390px;
			height: 550px;
			border: 1px solid #A1A1A1;
		}
		.edit-content {
			width: 60%;
			height: 550px;
			border: 1px solid #A1A1A1;
		}
		
		.ad-header {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #fff;
			background-color: #09262B;
		}
		.btn-tab-sx button.active {
			color: #fff;
			background-color: #11B5AB;
		}
		.btn-tab-sx .btn-default.active:focus, .btn-tab-sx .btn-default.active:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		
		.tab-content .tab-pane {
			height: 474px;
			overflow-y: auto;
		}
		.tab-pane .list-group .list-group-item {
			background-color: #F3F3F3;
			border: none;
			margin-bottom: 10px;
		}
		#tab-panel1 .list-group .list-group-item {
			padding: 0;
			padding-left: 15px;
		}
		.tab-pane .list-group-item .radio-inline {
			vertical-align: text-top;
		}
		.tab-pane .list-group-item .modal-body {
			display: inline-block;
			padding: 0;
			width: 280px;
			padding: 5px 0 !important;
		}
		.tab-pane .list-group-item .user-info {
			display: inline-block;
			vertical-align: middle;
			color: #666666;
		}
		.user-info .name {
			margin-right: 10px;
		}
		.user-info .position {
			color: #6F6F6F;
			font-size: 12px;
		}
		.user-info .phone {
			font-size: 13px;
		}
		.phone-icon {
			position: absolute;
			width: 50px;
			height: 100%;
			top: 0;
			right: 0;
			line-height: 50px;
			text-align: center;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
		}
		.phone-icon img {
			width: 20px;
			height: 20px;
		}
		.wechart-icon {
			position: absolute;
			width: 50px;
			height: 100%;
			top: 0;
			right: -50px;
			line-height: 50px;
			text-align: center;
			border-right: 1px solid #fff;
		}
		.wechart-icon img {
			width: 20px;
			height: 20px;
		}
		
		.modal-big {
			position: relative;
			display: inline-block;
			width: calc(100% - 30px);
			padding: 5px 0;
		}
		.ad-name {
			color: #666666;
		}
		.href-btn {
			position: absolute;
			height: 100%;
			top: -2px;
			right: 0;
		}
		.label-select {
			margin-top: 20px;
		}
		.label-select .label-title {
			margin-bottom: 10px;
			color: #6F6F6F;
		}
		.label-select .label-group .label {
			display: inline-block;
			padding: 3px 25px;
			margin-right: 20px;
			margin-bottom: 20px;
			background-color: #E1E1E1;
			color: #848484;
			cursor: pointer;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.label-select .label-group .label.active {
			background-color: #11B5AB;
			color: #fff;
		}
		/*modal*/
		.manage-border {
			display: flex;
			margin: 0 auto;
			border: 1px solid #A1A1A1;
		}
		.staff-tree {
			width: 400px;
			border-right: 1px solid #A1A1A1;
		}
		.search-staff {
			border-bottom: 1px solid #A1A1A1;
		}
		.search-staff img{
			width: 20px;
			margin-left: 20px;
		}
		.search-staff input[type='search'] {
			display: inline-block;
			width: 350px;
			border: none;
		}
		.search-staff input[type="search"]:focus{
		    box-shadow: none;
		}
		
		.tree-view {
			height: 400px;
			padding: 20px 10px;
		}
		.tree-ul {
			padding-left: 20px;
		}
		.tree-li {
			position: relative;
    		display: block;
    		padding: 5px 0;
    		color: #818181;
		}
		.tree-arrow {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-right: 5px;
			background: url(../../img/myExtension/tree-right.png) no-repeat;
			background-size: 100% 100%;
		}
		.tree-arrow.active {
			background: url(../../img/myExtension/tree-down.png) no-repeat;
			background-size: 100% 100%;
		}
		.tree-title {
			font-weight: bold;
		}
		.tree-view .tree-li input[type='checkbox'] {
			position: absolute;
			top: 5px;
			right: 10px;
			width: 15px;
			height: 15px;
		}
		.staff-name {
			margin-left: 8px;
			vertical-align: middle;
		}
		
		.selected-staff {
			width: 300px;
			border-right: 1px solid #A1A1A1;
		}
		.selected-title {
			width: 100%;
			height: 35px;
			text-align: center;
			line-height: 35px;
			color: #818181;
		}
		.staff-list {
			height: 400px;
			padding: 20px 20px 20px 10px;
		}
		
		.task-require {
			width: 500px;
		}
		.inline-input {
			display: inline-block;
			width: 200px;
			vertical-align: middle;
		}
		.flex-content {
			display: flex;
			justify-content: space-between;
		}
		.form_datetime {
			width: 200px;
		}
		/*预览model*/
		.preview-content {
			display: flex;
		}
		.phone-model {
			width: 220px;
			height: 450px;
			margin: 50px 100px;
			padding: 85px 13px 52px 11px;
			background: url(../../img/myExtension/phone-model.png) no-repeat;
			background-size: 100% 100%;
		}
		.phone-content {
			width: 100%;
			height: 100%;
			padding: 10px;
			color: #666666;
			overflow-x: hidden;
			overflow-y: scroll;
		}
		/*滚动条凹槽的颜色，还可以设置边框属性*/
		.phone-content::-webkit-scrollbar-track-piece { 
			background-color:#f8f8f8;
		}
		/*滚动条的宽度*/
		.phone-content::-webkit-scrollbar {
			width:3px;
			height:3px;
		}
		/*滚动条的设置*/
		.phone-content::-webkit-scrollbar-thumb {
			background-color:#dddddd;
			background-clip:padding-box;
			min-height:28px;
		}
		.phone-content::-webkit-scrollbar-thumb:hover {
			background-color:#bbb;
		}
		.phone-title {
			color: #111;
			/*font-size: 16px;*/
		}
		.phone-body {
			font-size: 12px;
		}
		.phone-body img {
			max-width: 100%;
			height: auto;
		}
		.scan-wechat {
			margin-top: 50px;
		}
		.preview-qrcode {
			width: 386px;
			height: 220px;
			border: 1px solid #A1A1A1;
			text-align: center;
		}
		.preview-qrcode .qrcode {
			width: 120px;
			height: 120px;
			margin: 0 auto;
			margin-top: 30px;
			border: 1px solid #A1A1A1;
		}
		.preview-qrcode .prompt {
			margin-top: 15px;
			color: #6B6B6B;
		}
		.wechat-share {
			margin-top: 100px;
			padding: 10px;
			width: 386px;
			height: 132px;
			border: 1px solid #A1A1A1;
		}
		.wechat-title {
			font-size: 16px;
			color: #666666;
		}
		.wechat-content {
			display: flex;
			margin-top: 20px;
		}
		.wechat-describe {
			width: calc(100% - 80px);
			height: 62px;
			color: #8E8E8E;
			display: -webkit-box;
		    overflow: hidden;
		    white-space: normal!important;
		    text-overflow: ellipsis;
		    word-wrap: break-word;
		    -webkit-line-clamp: 3;
		    -webkit-box-orient: vertical;
		}
		.wechat-icon img {
			vertical-align: top;
			margin-left: 10px;
			width: 60px;
			height: 60px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="operate-btn">
			<button type="button" class="btn btn-default" data-toggle="modal" data-target="#subTaskModel">分任务</button>
			<button type="button" class="btn btn-default">保存</button>
			<button type="button" class="btn btn-default" data-toggle="modal" data-target="#previewModel">预览</button>
			<button type="button" class="btn btn-default">发布</button>
		</div>
		<div class="article-info">
			<div class="title-abstract">
				<div class="title-prompt">
					<div class="title">
						<span class="number-words"><span>32</span>/32</span>
						<input type="text" maxlength="32" class="form-control" onkeyup="checklength(this,32);" placeholder="文章标题（最多32个字）">
					</div>
					<div class="prompt">标题内容不能为空</div>
				</div>
				<div class="abstract-prompt title-prompt">
					<div class="title">
						<span class="number-words"><span>54</span>/54</span>
						<textarea class="form-control" maxlength="54" rows="3" onkeyup="checklength(this,54);" placeholder="文章摘要（最多54个字）"></textarea>
					</div>
					<div class="prompt">摘要内容不能为空</div>
				</div>
			</div>
			<div class="preview-img">
				分享预览图
			</div>
		</div>
		<div class="article-info">
			<div class="implant-ad">
				<div class="ad-header">植入广告</div>
				<div class="btn-group btn-group-justified btn-tab-sx" role="group" aria-label="button-group">
					<div class="btn-group" role="group">
						<button type="button" panel-data="tab-panel1" class="btn btn-default active">名片</button>
					</div>
					<div class="btn-group" role="group">
						<button type="button" panel-data="tab-panel2" class="btn btn-default">报名</button>
					</div>
					<div class="btn-group" role="group">
						<button type="button" panel-data="tab-panel3" class="btn btn-default">商品</button>
					</div>
					<!--<div class="btn-group" role="group">
						<button type="button" panel-data="tab-panel4" class="btn btn-default">代金券</button>
					</div>-->
				</div>
				<div class="tab-content">
					<div id="tab-panel1" class="tab-pane active">
						<ul class="list-group">
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-body">
									<img class="border-radius-40" src="../../img/myClients/header_img.png" />
									<div class="user-info">
										<span class="name">王经理</span><span class="position">销售总监</span><br />
										<span class="phone">18685306265</span>
									</div>
									<div class="phone-icon">
										<img src="../../img/myExtension/phone.png" />
									</div>
									<div class="wechart-icon">
										<img src="../../img/myExtension/wechart.png" />
									</div>
								</div>
							</li>
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-body">
									<img class="border-radius-40" src="../../img/myClients/header_img.png" />
									<div class="user-info">
										<span class="name">王经理</span><span class="position">销售总监</span><br />
										<span class="phone">18685306265</span>
									</div>
									<div class="phone-icon">
										<img src="../../img/myExtension/phone.png" />
									</div>
									<div class="wechart-icon">
										<img src="../../img/myExtension/wechart.png" />
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="tab-panel2" class="tab-pane">
				  		<ul class="list-group">
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>活动名称</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">马上报名</button>
									</div>
								</div>
							</li>
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>王者峡谷一日游</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">马上报名</button>
									</div>
								</div>
							</li>
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>免费吃货节</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">马上报名</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="tab-panel3" class="tab-pane">
				  		<ul class="list-group">
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>商品名称</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">立即购买</button>
									</div>
								</div>
							</li>
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>地球人电脑</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">立即购买</button>
									</div>
								</div>
							</li>
							<li class="list-group-item">
								<label class="radio-inline">
									<input type="radio"class="" name="checkAd">
								</label>
								<div class="modal-big">
									<div class="ad-name">
										<a>苹果XXXXX</a>
									</div>
									<div class="href-btn">
										<button type="button" class="btn btn-default">立即购买</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="edit-content">
				<script id="editor" type="text/plain" style="height: 444px;width: 100%;">
					内容呢
				</script>
			</div>
		</div>
		<div class="label-select">
			<div class="label-title">
				<label>标签：</label>
			</div>
			<div class="label-group">
				<span class="label label-default active">奶茶</span>
				<span class="label label-default">互联网</span>
				<span class="label label-default">金融</span>
				<span class="label label-default">科技</span>
				<span class="label label-default">装修</span>
				<span class="label label-default">网络安全</span>
				<span class="label label-default">互联网</span>
				<span class="label label-default">金融</span>
				<span class="label label-default">科技</span>
				<span class="label label-default">装修</span>
				<span class="label label-default">网络安全</span>
				<span class="label label-default">互联网</span>
				<span class="label label-default">金融</span>
				<span class="label label-default">科技</span>
				<span class="label label-default">装修</span>
				<span class="label label-default">网络安全</span>
				<span class="label label-default">互联网</span>
				<span class="label label-default">金融</span>
				<span class="label label-default">科技</span>
				<span class="label label-default">装修</span>
				<span class="label label-default">网络安全</span>
			</div>
		</div>
	</div>	
	
	<!-- 分任务Modal -->
	<div class="modal fade bs-example-modal-lg" id="subTaskModel" tabindex="-1" role="dialog" aria-labelledby="subTaskModelLabel">
		<div class="modal-dialog modal-lg modal-1234" role="document">
			<div class="modal-content">
				<div class="modal-header">
			    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    	<h4 class="modal-title" id="subTaskModelLabel">任务指派</h4>
				</div>
			  	<div class="modal-body">
			    	<div class="manage-border">
			    		<div class="staff-tree">
			    			<div class="search-staff">
			    				<img src="../../img/myExtension/search-ash.png" />
			    				<input type="search" class="form-control" placeholder="输入员工姓名">
			    			</div>
			    			<div class="tree-view">
			    				<ul class="tree-ul">
									<li class="tree-li">
										<span class="tree-arrow active"></span>
										<span class="tree-title">乐子科技</span>
										<input type="checkbox" />
										<ul class="tree-ul">
											<li class="tree-li">
												<span class="tree-arrow"></span>
												<span>秘书部</span>
												<input type="checkbox" />
											</li>	
											<li class="tree-li">
												<span class="tree-arrow active"></span>
												<span>销售部</span>
												<input type="checkbox" />
												<ul class="tree-ul">
													<li class="tree-li">
														<img class="border-radius-20" src="../../img/myClients/header_img.png" />
														<span class="staff-name">隔壁老王</span>
														<input type="checkbox" />
													</li>	
													<li class="tree-li">
														<img class="border-radius-20" src="../../img/myClients/header_img.png" />
														<span class="staff-name">张老三</span>
														<input type="checkbox" />
													</li>
												</ul>
											</li>
										</ul>	
									</li>
								</ul>
			    			</div>
			    		</div>
			    		<div class="selected-staff">
			    			<div class="selected-title">
			    				已经选择的员工
			    			</div>
			    			<div class="staff-list">
			    				<ul class="tree-ul">
									<li class="tree-li">
										<img class="border-radius-20" src="../../img/myClients/header_img.png" />
										<span class="staff-name">隔壁老王</span>
										<button class="close"><span>&times;</span></button>
									</li>
									<li class="tree-li">
										<img class="border-radius-20" src="../../img/myClients/header_img.png" />
										<span class="staff-name">隔壁老王</span>
										<button class="close"><span>&times;</span></button>
									</li>
								</ul>	
			    			</div>
			    		</div>
			    		<div class="task-require">
			    			<div class="selected-title">
			    				任务要求
			    			</div>
			    			<div class="staff-list">
			    				<ul class="tree-ul">
									<li class="tree-li flex-content">
										<span>转发数（>不低于）</span>
										<input type="number" class="form-control inline-input" maxlength="5" placeholder="" value="0">
									</li>
									<li class="tree-li flex-content">
										<span>阅读数（>不低于）</span>
										<input type="number" class="form-control inline-input" maxlength="5" placeholder="" value="0">
									</li>
									<li class="tree-li flex-content">
										<span>报名数（>不低于）</span>
										<input type="number" class="form-control inline-input" maxlength="5" placeholder="" value="0">
									</li>
									<li class="tree-li flex-content">
										<span>完成时间</span>
										<div id="datetimepicker" class="input-group date form_datetime" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
						                    <input id="endDateTime" class="form-control" size="16" type="text" value="" readonly>
						                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
											<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
						                </div>
									</li>
									<li class="tree-li flex-content">
										<div id="noLimitData" class="checkbox">
											<label>
										    	<input type="checkbox" value="">
										    	不限时间
											</label>
										</div>
									</li>
								</ul>	
			    			</div>
			    		</div>
			    	</div>
			  	</div>
			  	<div class="modal-footer">
			    	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			    	<button type="button" class="btn btn-primary">确认</button>
			  	</div>
			</div>
		</div>
	</div>
	<!--预览model-->
	<div class="modal fade bs-example-modal-lg" id="previewModel" tabindex="-1" role="dialog" aria-labelledby="previewLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
			    	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    	<h4 class="modal-title" id="previewLabel">预览</h4>
				</div>
			  	<div class="modal-body">
			  		<div class="preview-content">
				    	<div class="phone-model">
				    		<div class="phone-content">
				    			<p class="phone-title">文章标题昆仑决</p>
				    			<h6>2018-5-7 <a>张三丰</a></h6>
				    			<div class="phone-body">
                            	    <p>范德萨发的说法反倒萨法阿返回达康书记</p><p>发动机撒开了</p><p>fsdkaj发送建档立卡f</p><p>分类看电视剧发sd</p><p>&nbsp;发送到发送到</p><p>范德萨福建省打开啦发</p><p>fsadklfjasd</p><p>打分</p><p>疯狂倒计时了福建师大</p><p>发电量撒开发阶段三</p><p>发来撒大家发上来打客服jsad</p><p>附近开了多少积分阿圣诞快乐</p><p>关闭好几个反倒萨法快乐圣诞节</p><p>风刀霜剑奥卡福ads热武器附近买房圣诞快乐</p><p>发的撒开飞机撒打开</p><p>方式打开了房间阿山东龙看风景三d酸辣粉</p><p>范德萨范德萨<br></p><p>烦死哒fsd八万人</p><p>个erg</p><p>斯蒂芬胜多负少的 烦死哒<img src="http://www.haomaimrm.com/img/2/185/69716/5fd4a5a2-f9a1-45f0-9685-444e01031eae.jpg" title="5fd4a5a2-f9a1-45f0-9685-444e01031eae.jpg" alt="" style="height: auto;"></p>
				    			</div>
				    		</div>
				    	</div>
				    	<div class="scan-wechat">
				    		<div class="preview-qrcode">
				    			<div class="qrcode">
				    				
				    			</div>
				    			<div class="prompt">
				    				微信扫一扫，你就开始分享
				    			</div>
				    		</div>
				    		<div class="wechat-share">
				    			<div class="wechat-title text-ellipsis">
				    				土豪买了楼上楼下四套房 将楼板打穿安装电梯（视频）
				    			</div>
				    			<div class="wechat-content">
				    				<div class="wechat-describe">
				    					近日，在广西南宁某小区的一栋33层住宅楼里，有一名业主梁先生在连续的3层楼里，买了4套房，10栋E座的201、202、301、401。
				    				</div>
				    				<div class="wechat-icon">
				    					<img src="../../img/HBuilder.png"/>
				    				</div>
				    			</div>
				    		</div>
				    	</div>
			    	</div>
			  	</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.fr.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="http://xml.jmodata.com/phone/utf8-jsp/ueditor.config.js"></script>
	<script type="text/javascript" src="http://xml.jmodata.com/phone/utf8-jsp/ueditor.all.min.js" ></script>
	<script type="text/javascript" src="http://xml.jmodata.com/phone/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
	
	<script>
		$(function(){
//			$("#endDateTime").val("2018-5-5");
			
		});
		$('#datetimepicker').datetimepicker({
	        //language:  'fr',
	        format:'yyyy-mm-dd',
	        language:'zh-CN',
	        weekStart: 1,
	        todayBtn:  true,
			autoclose: true,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0,
	        showMeridian: true
	    });		
	    
	    $('#noLimitData').on('click',function(){
	    	if ($(this).find("input[type='checkbox']").prop("checked")) {
	    		$("#endDateTime").attr('disabled','disabled').val("");
	    		$('#datetimepicker').datetimepicker('remove');	
	    	}else{
	    		$('#endDateTime').removeAttr('disabled');
	    		$('#datetimepicker').datetimepicker({
	    			format:'yyyy-mm-dd',
	    			language:'zh-CN',
			        weekStart: 1,
			        todayBtn:  true,
					autoclose: true,
					todayHighlight: 1,
					startView: 2,
					minView: 2,
					forceParse: 0,
			        showMeridian: true
	    		});
	    	}
	    	
	    });
		
		var ue = UE.getEditor('editor');
		function checklength(obj, number){
			
			if ($(obj).val().length > number) {
				$(obj).val($(obj).val().substring(0, number));
			}
			$(obj).closest(".title-prompt").find(".number-words span").text(number - $(obj).val().length);
			if ($(obj).val().length == 0) {
				$(obj).closest(".title-prompt").find(".prompt").css("display","inline-block");
			}else {
				$(obj).closest(".title-prompt").find(".prompt").css("display","none");
			}
		}
		$(".btn-tab-sx").on("click", "button", function(){
			$(".btn-tab-sx button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
		});
		
		$(".tree-view").on('click', '.tree-li', function(e){
			e.stopPropagation(); //阻止冒泡
			if ($(this).find(".tree-ul").length > 0) {
				if ($(this).find(".tree-ul").first().attr("class").indexOf("hide") != -1) {
					$(this).find(".tree-ul").first().attr("class", "tree-ul show");
					$(this).find(".tree-arrow").first().addClass("active");
					
				}else {
					$(this).find(".tree-ul").first().attr("class", "tree-ul hide");
					$(this).find(".tree-arrow").first().removeClass("active");
				}	
			}
		});
		$(".tree-view").on("click", ".tree-li input[type='checkbox']", function(e){
			e.stopPropagation(); //阻止冒泡
			if ($(this).prop("checked")) {
				if ($(this).closest(".tree-li").find(".tree-ul").length > 0 && $(this).closest(".tree-li").find(".tree-ul").first().attr("class").indexOf("hide")) {
					$(this).closest(".tree-li").find(".tree-ul").first().attr("class", "tree-ul show");
					$(this).closest(".tree-li").find(".tree-arrow").first().addClass("active");
				}
				$(this).closest(".tree-li").find("input[type='checkbox']").each(function(){
					$(this).prop("checked",true);
				});
				var checkAll = $(this).closest(".tree-ul").closest(".tree-li").find("input[type='checkbox']").length - 1;
				var checkeds = $(this).closest(".tree-ul").closest(".tree-li").find("input[type='checkbox']:checked").length;
				if (checkAll == checkeds) {
					$(this).closest(".tree-ul").closest(".tree-li").find("input[type='checkbox']").first().prop("checked",true);
				}
			}else{
				$(this).closest(".tree-li").find("input[type='checkbox']").each(function(){
					$(this).prop("checked",false);
				});
				$(this).closest(".tree-ul").closest(".tree-li").find("input[type='checkbox']").first().prop("checked",false);
			}
			
		});
	</script>
</body>
</html>
